<%--
  Created by IntelliJ IDEA.
  User: rcg
  Date: 2022/10/11
  Time: 9:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <link type="text/css" rel="stylesheet" href="/css/moregood.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>

</head>
<body>
<div id="app">

    <div>
        <el-button type="success" @click="add">添加用户</el-button>
    </div>


    <div style="position: absolute;top: 6px;left: 429px;">
        <el-form :inline="true" :model="userVo" class="demo-form-inline">
            <el-form-item label="账号">
                <el-input v-model="userVo.username" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名">
                <el-input v-model="userVo.realname" placeholder="真实姓名"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </div>


    <el-table
            :data="tableData"
            border
            style="width: 100%"

            :cell-style="styleBack"
            :header-cell-style="getRowClass"

    >

        <el-table-column
                prop="uId"
                label="编号"
                width="70">
        </el-table-column>
        <el-table-column
                prop="username"
                label="账号"
                width="100">
        </el-table-column>

        <el-table-column
                prop="realname"
                label="真实姓名">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄">
        </el-table-column>

        <el-table-column
                prop="sex"
                label="性别">
        </el-table-column>

        <el-table-column
                prop="password"
                label="密码" v-if="false">
        </el-table-column>

        <el-table-column
                prop="explain"
                label="用户说明">
        </el-table-column>

        <el-table-column
                prop="headurl"
                label="头像">
            <template slot-scope="scope">
                <img :src="scope.row.headurl" width="80" height="80">
            </template>
        </el-table-column>


        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="danger" size="small">删除</el-button>
                <el-button type="success" size="small" @click="editUser(scope.row)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>

    <%--分页--%>
    <div style="margin-top: 0.2rem; margin-left: 18.2rem;">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5,7,10]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>


    <!--添加的弹出层dialogVisible:控制对话框的显示和隐藏-->
    <el-dialog
            title="添加信息"
            :visible.sync="dialogVisible1"
            width="30%"
    >
        <!--:model:绑定表单数据-->
        <el-form label-width="80px" :model="addForm" ref="addFormRef">

            <el-upload
                    style="border:1px solid #bcbec2; width: 100px;height: 100px;margin-left: 94px;margin-bottom: 20px;"
                    class="avatar-uploader"
                    action="/upload/up"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl1" :src="imageUrl1" class="avatar" width="100px" height="100px">
                <i v-else class="el-icon-plus avatar-uploader-icon" style="margin-left: 38px;
margin-top: 41px;"></i>
            </el-upload>

            <el-form-item label="账号" prop="username">
                <el-input v-model="addForm.username"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input v-model="addForm.password"></el-input>
            </el-form-item>


            <el-form-item label="性别" prop="sex" :data="SexAll">
                <el-select :popper-append-to-body="false"
                           v-model="addForm.sex" placeholder="请选择性别" style="width: 100%">
                    <el-option
                            v-for="item in SexAll"
                            :key="item.id"
                            :label="item.name"
                            :value="item.sex">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="真实姓名" prop="realname">
                <el-input v-model="addForm.realname"></el-input>
            </el-form-item>

            <el-form-item label="年龄" prop="age">
                <el-input v-model="addForm.age"></el-input>
            </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="qrtj()" :visible.sync="dialogVisible1">确认添加</el-button>
        </span>
    </el-dialog>


    <!--修改的弹出层dialogVisible:控制对话框的显示和隐藏-->
    <el-dialog
            title="修改提示"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <!--:model:绑定表单数据-->
        <el-form label-width="80px" :model="editForm">


            <el-upload
                    style="border:1px solid #bcbec2; width: 100px;height: 100px;margin-left: 94px;margin-bottom: 20px;"
                    class="avatar-uploader"
                    action="/upload/up"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" width="100px" height="100px">
                <i v-else class="el-icon-plus avatar-uploader-icon" style="margin-left: 38px;margin-top: 41px;"></i>
            </el-upload>


            <el-form-item label="账号" prop="username">
                <el-input v-model="editForm.username"></el-input>
            </el-form-item>


            <el-form-item label="真实姓名" prop="realname">
                <el-input v-model="editForm.realname"></el-input>
            </el-form-item>

            <el-form-item label="年龄" prop="age">
                <el-input v-model="editForm.age"></el-input>
            </el-form-item>


            <el-form-item label="性别" prop="sex" :data="SexAll">
                <el-select v-model="editForm.sex" placeholder="请选择性别" style="width: 100%">
                    <el-option
                            v-for="item in SexAll"
                            :key="item.id"
                            :label="item.name"
                            :value="item.sex">
                    </el-option>
                </el-select>

            </el-form-item>


            <el-form-item label="密码" prop="password">
                <el-input v-model="editForm.password"></el-input>
            </el-form-item>


        </el-form>

        <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmUpdate">确认修改</el-button>
        </span>
    </el-dialog>


</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            SexAll: [],
            tableData: [],
            currentPage: 1,
            pageSize: 5,
            total: 0,
            userVo: {},
            //选中的id值

            dialogVisible01: false,

            //用户说明
            explain: "",
            //默认分页数据的当前页
            currentPage: 1,
            //默认分页数据的当前页有几条数据
            pageSize: 5,
            total: 0,

            //添加和修改
            dialogVisible: false,
            dialogVisible1: false,
            //定义添加表单的数据变量
            addForm: {},
            //定义修改表单的数据变量
            editForm: {},
            //文件上传与回显用到的url地址
            imageUrl: "",
            imageUrl1: "",

            //内置查询表单
            formInline: {},

        },
        created(){
            this.initTable();
            this.intosex();
        },
        methods: {


            //性别
            intosex() {
                axios.get("/sex/all").then(resp => {

                    if (resp.data.code === 200) {
                        this.SexAll = resp.data.data
                    }
                })
            },
            //查询
            onSubmit() {
                this.initTable();

            },


            //上传头像成功后的处理
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data;
                this.imageUrl1 = res.data;
            },
            //在上传之前执行的函数，用来回显头像数据
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 10;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            //添加
            add() {
                this.imageUrl1 = null;
                this.dialogVisible1 = true;
            },
            //确认添加
            qrtj() {

                this.addForm.headurl = this.imageUrl1;
                axios.post("/user/add", this.addForm).then(result => {
                    if (result.data.code === 200) {
                        this.$message.success("添加员工信息成功")
                        //关闭弹出层
                        this.dialogVisible1 = false;
                        //重新加在表格数据
                        this.initTable();
                        this.imageUrl1 = "";
                        this.$refs.addFormRef.resetFields();
                    }
                })
            },
            //修改按钮的触发事件
            editUser(row) {
                //1.显示对话框
                this.dialogVisible = true;
                console.log(row)
                //回显图片
                this.imageUrl = row.headurl

                //在此转json是为了把数据固定阻断双向绑定里面的数据同步
                let parse = JSON.parse(JSON.stringify(row));
                this.editForm = parse;


            },

            //确认修改
            confirmUpdate() {
                //提交表单数据到后台 qs工具可以把前端的json对象转换为表单或者查询参数的数据

                //提交到后台应该是修改之后的头像的url地址，需要重新赋值一下
                this.editForm.headurl = this.imageUrl;
                axios.post("/user/update", this.editForm).then(result => {
                    if (result.data.code === 200) {
                        this.$message.success("修改员工信息成功")
                        //关闭弹出层
                        this.dialogVisible = false;
                        //重新加在表格数据
                        this.initTable();
                    }
                })
            },
            //删除
            handleClick(row) {
                axios.get("/user/del?uId=" + row.uId).then(resp => {
                    console.log(resp)
                    if (resp.data.code === 200) {
                        this.$message.success("删除成功");
                        this.initTable();
                    }

                })

            },


            //分页设置每页多少条数据
            handleSizeChange(val) {

                this.pageSize = val;
                this.initTable();

            },

            //当当前页数改变时，查找当前页和当前设置的每页多少条数据
            handleCurrentChange(val) {

                this.currentPage = val
                this.initTable();
            },

            initTable() {
                axios.post("/user/list?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize, this.userVo).then(resp => {


                    this.tableData = resp.data.data.list;
                    let a = new Array();
                    this.tableData.forEach(value => {
                        value.explain = "普通用户(患者)";
                        a.push(value)
                    })
                    this.total = resp.data.data.total;
                    this.tableData = [];
                    this.tableData = a;

                });
            },
            //关闭对话
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            // 表格奇偶层样式
            styleBack({ row, column, rowIndex, columnIndex }) {
                if ((rowIndex + 1) % 2 === 0) {
                    return "background:#053c4a; color:#fff;border:1px solid #053c4a";
                } else {
                    return "background:#042831; color:#fff;border:1px solid #042831";
                }
            },
            // 表头样式
            getRowClass({ rowIndex }) {
                return "background:#053c4a; color:#fff;border:3px solid #053c4a";
            },
        }
    })
</script>
</html>
